 <template> <!--测试svn-->
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="1000px"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系名称" prop="name">
            <el-input
              v-model="dataForm.name"
              placeholder="请输入联系人名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="dataForm.email"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="dataForm.phone"
              placeholder="请输入联系人电话"
              maxlength="11"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="realName">
            <el-input
              v-model="dataForm.realName"
              placeholder="请输入真实姓名"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idNo">
            <el-input
              v-model="dataForm.idNo"
              placeholder=" 请输入身份证号"
              maxlength="18"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="dataForm.birthday"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="dataForm.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择分组:" prop="options">
            <el-select
              v-model="dataForm.groupId"
              filterable
              allow-create
              default-first-option
              placeholder="请选择标签"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="国家：" prop="livingCountry">
            <el-select
              v-model="dataForm.livingCountry"
              filterable
              allow-create
              default-first-option
              @change="changePr"
              placeholder="请选择国家"
            >
              <el-option
                v-for="item in countrylist"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <span v-if="ShengShiQu">
        <el-col :span="6">
          <el-form-item label="省：" prop="livingState">
            <el-select
              v-model="dataForm.livingState"
              filterable
              allow-create
               @change="changeCi"
              default-first-option
              placeholder="请选择省"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              > 
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="市：" prop="livingCity">
            <el-select
              v-model="dataForm.livingCity"
              filterable
              allow-create
              @change="changeRe"
              default-first-option
              placeholder="请选择市"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区/县：" prop="livingRegion">
            <el-select
              v-model="dataForm.livingRegion"
              filterable
              allow-create
              default-first-option
              placeholder="请选择区"
            >
              <el-option
                v-for="item in regionList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </span>
        <span v-if="!ShengShiQu">
        <el-col :span="6">
          <el-form-item label="市：" prop="livingCity">
            <el-select
              v-model="dataForm.livingState"
              filterable
              allow-create
              @change="changeCi"
              default-first-option
              placeholder="请选择市"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区：" prop="livingRegion">
            <el-select
              v-model="dataForm.livingCity"
              filterable
              allow-create
              default-first-option
              placeholder="请选择区"
            >
              <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </span>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import data from '@/assets/country.json'
export default {
  data() {
    return {
      visible: false,
      jsondata:[],
      ShengShiQu:true,
      dataForm: {
        id: 0,
        name: "",
        email: "",
        phone: "",
        status: "",
        groupId: "",
        realName: "",
        idNo: "",
        birthday: "",
        sex: "",
        headImgs: "",
        livingCountry: "",
        livingState: "",
        livingCity: "",
        livingRegion: "",
        addUser: "",
        addTime: "",
        editUser: "",
        editTime: "",
      },
      countrylist: [
       
      ], //存放街道数据集合
      provinceList: [
      
      ], // 存放省数据集合
      cityList: [
       
      ], // 存放市数据集合
      regionList: [
       
      ], // 存放区数据集合
      options: [],
      dataRule: {
        name: [
          { required: true, message: "联系人名称不能为空", trigger: "blur" },
          
        ],
        email: [
          { required: true, validator: this.checkEmail, trigger: "blur" },
        ],
        phone: [
          { required: true, validator: this.contactNumber, trigger: "blur" },
        ],
        realName: [
          { required: true, message: "真实姓名不能为空", trigger: "blur" },
        ],
        idNo: [{ required: true, validator: this.idCard, trigger: "blur" }],
        birthday: [
          { required: true, message: "出生日期不能为空", trigger: "blur" },
        ],
         livingState: [
          { required: true, message: "省不能为空", trigger: "blur" },
        ],
        livingRegion: [
          { required: true, message: "区不能为空", trigger: "blur" },
        ],
        livingCity: [
          { required: true, message: "市不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.json()
        let treedata=data
         this.ShengShiQu=true
        this.dataForm.sex = 1;
        this.dataForm.status = 1;
        this.cityList=''
        this.regionList=''
        this.group();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/emsgcontact/info/${this.dataForm.id}`),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.emsgContact.name;
              this.dataForm.email = data.emsgContact.email;
              this.dataForm.phone = data.emsgContact.phone;
              this.dataForm.status = data.emsgContact.status;
              this.dataForm.groupId = data.emsgContact.groupId;
              this.dataForm.realName = data.emsgContact.realName;
              this.dataForm.idNo = data.emsgContact.idNo;
              this.dataForm.birthday = data.emsgContact.birthday;
              this.dataForm.sex = data.emsgContact.sex;
              this.dataForm.headImgs = data.emsgContact.headImgs;
              this.dataForm.livingCountry = data.emsgContact.livingCountry;
              this.dataForm.livingState = data.emsgContact.livingState;
              this.dataForm.livingCity = data.emsgContact.livingCity;
              this.dataForm.livingRegion = data.emsgContact.livingRegion;
              this.dataForm.addUser = data.emsgContact.addUser;
              this.dataForm.addTime = data.emsgContact.addTime;
              this.dataForm.editUser = data.emsgContact.editUser;
              this.dataForm.editTime = data.emsgContact.editTime;
              for (var i = 0; i < this.options.length; i++) {
                if (this.options[i].id === data.emsgContact.groupId) {
                  this.dataForm.groupId = this.options[i].id;
                }
              }
               for (var i = 0; i < treedata.length; i++) {
               if(treedata[i].name==data.emsgContact.livingCountry){
                  for (var j = 0; j < treedata[i].stateList.length; j++) {
                    if( data.emsgContact.livingState==treedata[i].stateList[j].name){
                        this.provinceList=treedata[i].stateList
                        for (var k = 0; k< treedata[i].stateList[j].cityList.length; k++) {
                          if( data.emsgContact.livingCity==treedata[i].stateList[j].cityList[k].name){
                              this.cityList=treedata[i].stateList[j].cityList
                              for (var z = 0; z< treedata[i].stateList[j].cityList[k].regionList.length; z++) {
                              if( data.emsgContact.livingRegion==treedata[i].stateList[j].cityList[k].regionList[z].name){
                                  this.regionList=treedata[i].stateList[j].cityList[k].regionList
                              }
                            }
                          }
                        }
                        
                    }
                  }
               }
              }
            }
          });
        }
      });
    },
    json(){
    //this.countrylist=data
    this.dataForm.livingCountry=data[0].name
    this.provinceList=data[0].stateList
    },
    //省
     changePr() {
			  for(var key of this.countrylist) {
          
			  	if(key.name == this.dataForm.livingCountry) {
            this.provinceList = key.stateList
            console.log(key.stateList)
            
					this.dataForm.livingState = key.stateList[0].name //默认选择第一个显示
				}
        }
       
			  this.changeCi()
			  //this.changeRe()
		  },
      //市
		 changeCi() {
       if(this.dataForm.livingState=='北京' || this.dataForm.livingState=='天津' || this.dataForm.livingState=='重庆' 
       || this.dataForm.livingState=='上海' ||this.dataForm.livingState=='香港' || this.dataForm.livingState=='澳门'){
          this.ShengShiQu=false
        }else{
           this.ShengShiQu=true
        }
        this.provinceList.forEach((item,index) => {
          if(item.name == this.dataForm.livingState) {
            this.cityList = item.cityList
            if(item.cityList.length==0){
                this.dataForm.livingCity=''
            }else{
                //this.dataForm.livingCity = item.cityList[0].name //默认选择第一个显示
                this.dataForm.livingCity=''
            }
          
          }
        })
         this.regionList=''
          this.dataForm.livingRegion=''
					 //this.changeRe()
		 },
     //区
		 changeRe() {
			 this.cityList.forEach((item1,index1) => {
				 if(item1.name == this.dataForm.livingCity) {
           this.regionList = item1.regionList
           if(item1.regionList.length==0){
                  this.dataForm.livingRegion=''
                }else{
                   this.dataForm.livingRegion = item1.regionList[0].name  //默认选择第一个显示
                }
				    
				    return;
				 }
			 })
		 },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/emsgcontact/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              name: this.dataForm.name,
              email: this.dataForm.email,
              phone: this.dataForm.phone,
              status: this.dataForm.status,
              groupId: this.dataForm.groupId,
              realName: this.dataForm.realName,
              idNo: this.dataForm.idNo,
              birthday: this.dataForm.birthday,
              sex: this.dataForm.sex,
              headImgs: this.dataForm.headImgs,
              livingCountry: this.dataForm.livingCountry,
              livingState: this.dataForm.livingState,
              livingCity: this.dataForm.livingCity,
              livingRegion: this.dataForm.livingRegion,
              addUser: this.dataForm.addUser,
              addTime: this.dataForm.addTime,
              editUser: this.dataForm.editUser,
              editTime: this.dataForm.editTime,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    /**
     * 身份证号码校验
     */
    idCard(rule, value, callback) {
      if (value === "") {
        callback(new Error("身份证号不能为空"));
      } else if (
        value &&
        (!/\d{17}[\d|x]|\d{15}/.test(value) ||
          (value.length !== 15 && value.length !== 18))
      ) {
        callback(new Error("身份证号码不符合规范"));
      } else {
        callback();
      }
    },
    /**
     * 邮箱校验
     */
    checkEmail(rule, value, callback) {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    },
    /**
     * 手机号码校验
     */
    contactNumber(rule, value, callback) {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (
        value &&
        (!/^[1][34578]\d{9}$/.test(value) ||
          !/^[1-9]\d*$/.test(value) ||
          value.length !== 11)
      ) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    },

    uploadFile(file) {
      this.formDate.append("file", file.file);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dataForm.logo = "";
    },

    handleChange(file, fileList) {
      this.dataForm.logo = URL.createObjectURL(file.raw);
    },

    beforeUpload(file) {
      return true;
    },
    group() {
      this.$http({
        url: this.$http.adornUrl("/emsgcontact/group"),
        method: "get",
        params: this.$http.adornParams({
          key: this.dataForm.key,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.options = data.list;
          var id = data.list[0].id;
          this.dataForm.groupId = this.options[0].id;
        } else {
          this.$message.error(data.msg)
        }
        
         
      });
    },
  },
};
</script>
